<template>
  <div class='detail bc-gray'>
    <nav class="bc-white">
      <p class="title">{{detailData.info?detailData.info.title:"暂无"}}</p>
      <p class="intro">{{detailData.info?detailData.info.describe:"暂无"}}</p>
      <p class="time">截止时间：{{detailData.info?detailData.info.endtime:"暂无"}}</p>
    </nav>
    <ul class="results">
      <li v-for="(item, index) in detailData.data" :key="index" v-if="item.type=='单选题'||item.type=='多选题'" class="bc-white">
        <p class="title pr">{{index+1}}、{{item.title}} <span class="color-blue">[{{item.type}}]</span></p>
        <p v-for="(opt,index0) in item.result" class="clearB"><span>{{opt.option}}</span><span class="fr">票数：{{opt.content}}</span></p>
        <Chart :info="item" :ttid="'id_'+index" type="pie" />
      </li>

      <li v-else-if="item.type=='问答题'" class="bc-white">
        <p class="title pr">{{index+1}}、{{item.title}} <span class="color-blue">[{{item.type}}]</span></p>
        <p v-for="(opt,index0) in item.result">{{opt.content}}</p>
      </li>

      <li v-else-if="item.type=='矩阵题'" class="bc-white">
        <p class="title pr">{{index+1}}、{{item.title}} <span class="color-blue">[{{item.type}}]</span></p>
        <div  class="matrix">
          <p v-for="(opt,index0) in item.result" v-if="index0==0">
            <span></span>
            <span v-for="(opt1, index1) in opt.result">{{opt1.label}}</span>
          </p>
          <p v-for="(opt,index0) in item.result">
            <span>{{opt.option}}</span>
            <span v-for="(opt1, index1) in opt.result" :key="index1" class="color-green">{{opt1.content}}</span>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import Chart from "../../../../../components/chart.vue"
export default {
  components: {Chart},
  name: "",
  data() {
    return {
      detailData:{}
    };
  },
  methods: {
    /**
     * @name 获取详情
     */
    getDetail(url) {
      let params = {
        id: _g.getRouterParams(this).id
      }
      _g.apiPost("questionnaire/detailques", params).then(res => {
        this.$set(this, "detailData", res)
      })
    },
  },
  created() {
    this.getDetail()
  },
};
</script>
<style lang="scss" scoped>
.detail {
  height: 100%;
  overflow: auto;
  nav{
    padding: 10px;
    margin-bottom: 20px;

    .title{
      font-size: 18px;
      text-align: center;
      padding: 10px 0;
    }
    p{
      font-size: 13px;
      color: #666;
    }
    .time{
      margin: 10px 0 15px 0;
    }
  }
  .results{
    
    li{
      padding: 0 10px;
      margin-bottom: 10px;
      
      p{
        font-size: 13px;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
        box-sizing: border-box;
        color: #666;
        line-height: 50px;
        text-indent: 10px;
      }
      .title{
        font-size: 16px;
        text-indent: 5px;
        color: #333;

        span{
          font-size: 12px;
        }
      }
      .title:before{
        content: "";
        width: 10px;
        height: 100%;
        background-color: #00998d;
        position: absolute;
        left: -5px;
        top: 0;
      }

      .matrix{

        p{
          display: flex;
          width: 100%;

          span{
            flex: 1;
            text-align: center;
            line-height: 50px;
          }
        }
      }
    }
  }
}
</style>